<template>
    <el-table :data="tableData" v-loading="tableLoading" :border="border">
        <el-table-column 
            v-for="item in columns"
            :width="item.width"
            :align="item.align?item.align:'center'"
            :prop="item.prop"
            :label="item.label">
            <template v-slot="{row}">
                <slot :name="item.prop" :row="row">{{getProp(row,item)}}</slot>
            </template>
           
        </el-table-column>
     
    </el-table>
</template>
<script setup>
//处理传递的属性名是xxx[0].xx
let getProp = (row,item) => {
    let reg = /^(.+)\[(\d+)\]\.?(.*)$/
    let matched = item.prop.match(reg)
    if(matched){
        let arr = row[matched[1]]
        let prop = arr[matched[2]]
        let prop2 = prop[matched[3]]
        return prop2
    }
    return row[item.prop]
}
//定义表格的属性
let props = defineProps({
    'tableData':{
        type:Array
    },
    'columns':{
        type:Array
    },
    'tableLoading':{
        type:Boolean,
        default(){
            return false
        }
    },
    'border':{
        type:Boolean,
        default(){
            return true
        }
    }
   
})
//使用方式
//给表格传递的属性
//1.tableData 表格对应的数据

//2.columns 每一项的属性描述，动态表头等等

//columns 传递类型   数组[]
//         属性      label:'表头'，prop:'数据对应的字段'，'width','align'

//插槽：
//通过指定 具名插槽 具名(同columns中的prop)，可以自定义表格的内容
</script>
